<template>
  <div class="app-container">
    <el-dialog
      :title="dialogtitle"
      :visible.sync="dialogVisible"
      width="98%"
      top="20px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      append-to-body
    >
      <dynamicEdit :infoid="id" :read-only="readOnly" :timestamp="timestamp" @dialogHide="dialogHide($event)" />
    </el-dialog>

    <div class="filter-container">
      <el-radio-group v-model="listQuery.auditState" @change="getList">
        <el-radio-button :label="0">未审核</el-radio-button>
        <el-radio-button :label="1">已通过</el-radio-button>
        <el-radio-button :label="2">已拒绝</el-radio-button>
      </el-radio-group>
      <!-- <el-button v-if="roleEdit" class="filter-item" style="margin-left: 10px;float:right" type="success" icon="el-icon-edit" @click="addnew">
        新建
      </el-button> -->
    </div>

    <el-table
      ref="multipleTable"
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%"
      @sort-change="sortChange"
      @selection-change="handleSelectionChange"
    >
      <el-table-column v-if="roleEdit" type="selection" width="50" align="center" />

      <el-table-column align="center" prop="id" label="编号" width="80" sortable="custom">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>

      <el-table-column width="150px" prop="real_name" label="姓名" align="center" sortable="custom" show-overflow-tooltip>
        <template slot-scope="scope">
          {{ scope.row.realName }}
        </template>
      </el-table-column>

      <el-table-column width="150px" prop="phone" label="联系电话" align="center" sortable="custom" show-overflow-tooltip>
        <template slot-scope="scope">
          {{ scope.row.phone }}
        </template>
      </el-table-column>

      <el-table-column width="200px" prop="email" label="邮箱" sortable="custom" show-overflow-tooltip>
        <template slot-scope="scope">
          {{ scope.row.email }}
        </template>
      </el-table-column>

      <el-table-column min-width="200px" prop="reason" label="申请理由" show-overflow-tooltip>
        <template slot-scope="scope">
          {{ scope.row.reason }}
        </template>
      </el-table-column>

      <el-table-column v-if="listQuery.auditState===0" align="center" label="操作" width="200">
        <template slot-scope="scope">
          <el-popconfirm v-if="roleEdit" title="确定审批通过该用户申请吗？" @onConfirm="passed(scope.row.id,1)">
            <el-button slot="reference" type="primary" size="small" icon="el-icon-success">
              通过
            </el-button>
          </el-popconfirm>
          <el-popconfirm v-if="roleEdit" title="确定拒绝该用户申请吗？" style="margin-left:10px" @onConfirm="passed(scope.row.id,2)">
            <el-button slot="reference" type="danger" size="small" icon="el-icon-error" style="margin-left:10px;">
              拒绝
            </el-button>
          </el-popconfirm>
        </template>
      </el-table-column>

      <el-table-column v-else align="center" label="状态" width="200">
        <template slot-scope="scope">
          {{ scope.row.auditState===1?'通过':'' }}
          {{ scope.row.auditState===2?'拒绝':'' }}
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
  </div>
</template>

<script>
// import { fetchList } from '@/api/article'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import dynamicEdit from './edit'

export default {
  name: 'ArticleList',
  components: { Pagination, dynamicEdit },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'info',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  props: {
    isEdit: {
      type: Boolean,
      default: true
    },
    isSelection: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      roleEdit: true,
      selection: false,
      dicListLoading: false,
      stopDicLoading: false,
      startDicLoading: false,
      submitLoading: false,
      deptList: [],
      roleList: [],
      diclist: [],
      settingVisible: false,
      item: {},
      dialogtitle: '新增',
      dialogVisible: false,
      readOnly: false,
      timestamp: false,
      list: [],
      total: 0,
      listLoading: true,
      listQuery: {
        auditState: 0,
        page: 1,
        limit: 10
      },
      Sortkey: '',
      Isace: '',
      multipleSelection: [],
      id: ''
    }
  },
  created() {
    this.getList()
    this.getDepts()
    this.getRoles()
  },
  methods: {
    passed(id, state) {
      const para = {
        auditState: state,
        userId: id
      }
      this.$http
        .post('/api/sysUser/saveUserAudit', para)
        .then(response => {
          if (response.data.success === true) {
            this.$message({
              message: '审核成功！',
              type: 'success'
            })
            this.getList()
          } else {
            console.log('审核失败:' + response.data.message)
            this.$message({
              message: '审核失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          console.log(error)
        })
    },
    getDepts() {
      const para = {
        pageNum: 1,
        pageSize: 1000
      }
      this.$http
        .post('/api/sysDept/queryPage', para)
        .then(response => {
          if (response.data.success === true) {
            this.deptList = []
            for (const item of response.data.result.records) {
              this.deptList.push({ label: item.deptName, value: item.id })
            }
          } else {
            console.log('获取失败:' + response.data.message)
            this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          console.log(error)
        })
    },
    getRoles() {
      this.$http
        .get('/api/sysRole/list')
        .then(response => {
          if (response.data.success === true) {
            this.roleList = []
            for (const item of response.data.result) {
              this.roleList.push({ label: item.roleName, value: item.id })
            }
          } else {
            console.log('获取失败:' + response.data.message)
            this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          console.log(error)
        })
    },
    setState(id, state) {
      if (this.roleEdit) {
        this.$http
          .post('/api/sysUser/savePersonalInfo', { id: id, userEnabled: state })
          .then(response => {
            if (response.data.success === true) {
              this.$message({
                message: '设置成功',
                type: 'success'
              })
              this.getList()
            } else {
              console.log('设置失败:' + response.data.message)
              this.$message({
                message: '设置失败:' + response.data.message,
                type: 'error'
              })
            }
          })
          .catch(error => {
            console.log(error)
          })
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    deleteData(id) {
      let ids = []
      if (id) {
        ids = [id]
      } else {
        ids = this.multipleSelection.map(item => item.id)
      }
      if (ids.length > 0) {
        this.$http
          .post('/api/sysUser/removeUsers', { ids: ids })
          .then(response => {
            if (response.data.success === true) {
              this.$message({
                message: '删除成功',
                type: 'success'
              })
              this.getList()
            } else {
              console.log('删除失败:' + response.data.message)
              this.$message({
                message: '删除失败:' + response.data.message,
                type: 'error'
              })
            }
          })
          .catch(error => {
            console.log(error)
          })
      } else {
        this.$message({
          message: '请至少选择一条信息',
          type: 'danger'
        })
      }
    },
    sortChange(column, prop, order) {
      this.Sortkey = column.prop
      if (column.order === 'ascending') {
        this.Isace = 'asc'
      } else {
        this.Isace = 'desc'
      }
      this.getList()
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    addnew() {
      this.id = 0
      this.readOnly = false
      this.dialogtitle = '新增'
      this.dialogVisible = true
      this.timestamp = new Date().getTime()
    },
    edit(id) {
      this.id = id
      this.readOnly = false
      this.dialogtitle = '编辑'
      this.dialogVisible = true
      this.timestamp = new Date().getTime()
    },
    detail(id) {
      this.id = id
      this.readOnly = true
      this.dialogtitle = '查看'
      this.dialogVisible = true
      this.timestamp = new Date().getTime()
    },
    dialogHide(flag) {
      this.dialogVisible = false
      this.getList()
    },
    getList() {
      const para = {
        userType: 2,
        auditState: this.listQuery.auditState,
        orderField: this.Sortkey,
        orderType: this.Isace,
        pageNum: this.listQuery.page,
        pageSize: this.listQuery.limit
      }
      this.listLoading = true
      this.$http
        .post('/api/sysUser/queryUserPage', para)
        .then(response => {
          this.listLoading = false
          if (response.data.success === true) {
            this.list = response.data.result.records
            this.total = response.data.result.total
            if (response.data.result.current > response.data.result.pages && response.data.result.pages !== 0) {
              this.listQuery.page = response.data.result.pages
              this.getList()
            }
          } else {
            console.log('获取失败:' + response.data.message)
            this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          console.log(error)
          this.listLoading = false
        })
      // fetchList(this.listQuery).then(response => {
      //   this.list = response.data.items
      //   this.total = response.data.total
      //   this.listLoading = false
      // })
    }
  }
}
</script>

<style scoped>
.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
</style>
